<template>
	<el-container class="store-view drag-box">
		<iframe ref="store" :src="url"></iframe>
		<add-group-member :visible="showAddGroupMember" :groupId="1" :members="[]" @share="share"
			@close="onCloseAddGroupMember"></add-group-member>
	</el-container>
</template>

<script>
import { emailRegister } from '@/api/register.js'
import { sendCodeEMail } from '@/api/common.js'
import AddGroupMember from './components/AddGroupMember.vue';
import sendVerifyCode from "@/utils/SendVerifyCode";
import {
	Debounce
} from '@/utils/double.js'
import dragBar from '@/view/components/dragBar'

export default {
	name: "login",
	components: {
		AddGroupMember,
	},
	data() {
		return {
			url: null,
			showAddGroupMember: false,
			activeGroup: { id: 1 },
			product: null,
			productId: null,
		};
	},
	mounted() {
		window.addEventListener('message', (e) => {
			console.log("接收到的商品信息", e.data)
			if (e.data.type == "share") {
				this.showAddGroupMember = true;
				this.product = e.data
				// this.share(e.data.data)
			}
		})
	},
	created() {
		console.log("🚀🚀🚀 ~ created ~ this.$route.query:", this.$route.query)
		if (this.$route.query?.productId) {
			this.productId = this.$route.query.productId;
			this.url = process.env.VUE_APP_SHOP_URL + "/product/detail/" + this.productId + "?token=" + localStorage.getItem('accessToken');
		} else {
			this.url = process.env.VUE_APP_SHOP_URL + "?token=" + localStorage.getItem('accessToken');
		}
	},
	methods: {
		share(data) {
			this.onSendMessage(data);
		},
		onCloseAddGroupMember() {
			this.showAddGroupMember = false;
		},
		onSendMessage(user) {
			let chat = {
				type: 'PRIVATE',
				targetId: user.id,
				showName: user.nickname,
				headImage: user.avatar,
				avatar:user.avatar,
				avatarThumb: user.avatarThumb,
			};
			this.$store.commit("setShareProduct", this.product);
			this.$store.commit("setShareUser", chat);
			this.$ipcRenderer.send('share-to-main', this.product);
			// this.$router.push("/home/chat");
		},
	}
}
</script>

<style scoped lang="scss">
.el-select {
	width: 100%;
}

.registerType {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 30px;
	margin-bottom: 40px;

	.item {
		color: #e2e2e2;
		font-size: 30px;

		&.on {
			color: #000;
		}
	}
}

.store-view {
	width: 100%;
	height: 100%;

	iframe {
		width: 100%;
		height: 100%;
		border: none;
	}

	.register-brand {
		display: flex;
		line-height: 50px;
		font-size: 22px;
		font-weight: 600;
		letter-spacing: 2px;
		text-transform: uppercase;

		.logo {
			width: 50px;
			height: 50px;
			object-fit: contain;
		}
	}

	.web-ruleForm {
		width: 100%;
		// height: 550px;
		opacity: 0.9;
		border-radius: 3px;
		overflow: hidden;
		border-radius: 3%;

		.btn_box {
			.fullbtn {
				width: 100%;
				height: 40px;
			}
		}

		.to-login {
			display: flex;
			line-height: 40px;
			text-align: left;
			padding-left: 20px;
			font-size: 14px;
			color: #255F46;
			justify-content: center;

			a {
				color: #255F46;
				text-decoration: none;
			}
		}
	}
}
</style>
